<template>
  <div class="user-box">
    <div class="user-header">
      <div class="pic">
        <img :src="agentInfo.avatarUrl" alt />
      </div>
      <div class="info">
        <div class="name-box">
          <div class="name">{{agentInfo.agentName}}</div>
          <div class="area">{{agentInfo.mojarRegion}}</div>
          <div class="arrow" @click="goEdit">
            <i class="iconfont icon-wode-erjizhe"></i>
          </div>
        </div>
        <div class="slogen">{{agentInfo.signature}}</div>
      </div>
    </div>
    <div class="money-box">
      <div class="money">
        <h5>128.00</h5>
        <p>我的钱包</p>
      </div>
      <div class="card">
        <i class="iconfont icon-shouye_mingpian"></i>
        <p>分享名片</p>
      </div>
    </div>
    <div class="adv">
      <img src alt />
    </div>
    <div class="sub-nav">
      <div class="item" v-for="(item,index) in navList" :key="index" @click="goNav(index)">
        <i class="iconfont" :class="item.icon"></i>
        <p>{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import userService from '@/services/userService'
export default {
  data() {
    return {
      agentInfo: {},
      navList: [
        { icon: '', name: '楼盘' },
        { icon: '', name: '数据' },
        { icon: '', name: '文章拓客分析' },
        { icon: '', name: '邀请' },
        { icon: '', name: '我的写一写' },
        { icon: '', name: '我的报备' },
        { icon: '', name: '我的问答' },
        { icon: '', name: '我的点评' },
        { icon: '', name: '拓客关系' },
        { icon: '', name: '培训资料' },
        { icon: '', name: '设置' }
      ]
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      userService
        .getQrCodeByToken()
        .then(res => {
          this.agentInfo = res
        })
        .catch()
    },
    goEdit() {
      this.$router.push('/user/edit')
    },
    goNav(index) {
      switch (index) {
        case 0:
          this.$router.push('')
          break
      }
    }
  }
}
</script>


<style lang="less" scoped>
.user-box {
  font-size: 12px;
  height: 100%;
  position: relative;
  background-color: #f7f9fa;
  .user-header {
    height: 116px;
    background-color: #007ae6;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 24px 16px;
    .pic {
      width: 60px;
      height: 60px;
      margin-right: 12px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      flex: 1;
      .name-box {
        display: flex;
        align-items: center;
        .name {
          height: 24px;
          font-size: 18px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 24px;
        }
        .area {
          height: 18px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          line-height: 18px;
        }
        .arrow {
          flex: 1;
          color: #fff;
          font-size: 20px;
          text-align: right;
        }
      }
    }
  }
  .money-box {
    background-color: #fff;
  }
  .adv {
    margin: 16px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}
</style>